/**
  * 定义gird布局样式
  * columns 12
  * spaces [xs, sm, default, md, lg]
  *
  */
@mixin gen_grid($columns: 12, $spaceMap) {
  .grid {
    display: flex;
    flex-wrap: wrap;
    >.grid-item {
      box-sizing: border-box;
      width: 100%;
      padding: 0;
      margin: 0;
    }

    &.reactive {

      .grid-item {
        @media screen and (max-width: 990px) {
         width: 100% !important;
        }
      }

     
    }
   
    @for $i from 2 through $columns {
      &.column_#{$i} {
        $width: calc(100% / #{$i});
        > label,
        >.grid-item {
          width: $width;
          
        }
        @for $j from 1 through $i {
          &>.grid-item.column_#{$j} {
            width: calc($width * #{$j}) !important;
          }
        }
      }
    }

    @each $key, $val in $spaceMap {
      &.gap_#{$key} {
        padding: calc($val/2);
        &.gap_clear {
          margin: -$val;
        }
        label,
        .grid-item {
          padding: calc($val/2);
        }
      }
    }

    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) and (max-width: 767.98px) {
      @for $i from 2 through $columns {
        &.column-xs_#{$i} {
          label,
          .grid-item {
            width: calc(100% / #{$i});
          }
        }
      }
    }

    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) and (max-width: 991.98px) {
      @for $i from 2 through $columns {
        &.column-sm_#{$i} {
          label,
          .grid-item {
            width: calc(100% / #{$i});
          }
        }
      }
    }

    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) and (max-width: 1199.98px) {
      @for $i from 2 through $columns {
        &.column-md_#{$i} {
          label,
          .grid-item {
            width: calc(100% / #{$i});
          }
        }
      }
    }

    // // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) and (max-width: 1699.98px) {
      @for $i from 2 through $columns {
        &.column-lg_#{$i} {
          label,
          .grid-item {
            width: calc(100% / #{$i});
          }
        }
      }
    }

    @media (min-width: 1600px) {
      @for $i from 2 through $columns {
        &.column-xl_#{$i} {
          label,
          .grid-item {
            width: calc(100% / #{$i});
          }
        }
      }
    }
  }
}
